<template>
  <div class="merchantsList">
    <div class="top">
      <div class="time pad">
        <span class="label">会员：</span>
        <el-input placeholder="请输入会员昵称、手机号" v-model="filter.customer">
        </el-input>
      </div>
      <div class="time pad">
        <span class="label">店铺名称：</span>
        <el-input placeholder="请输入店铺名称" v-model="filter.shopName">
        </el-input>
      </div>
      <div class="time pad">
        <span class="label">退卡时间：</span>
        <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div class="time pad">
        <span class="label">管辖区域：</span>
        <el-select v-model="filter.areaId" placeholder="请选择">
          <el-option v-for="item in areaSelect" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="btn pad">
        <el-button @click="setReset">重置</el-button>
        <el-button type="primary" @click="search">查询</el-button>
      </div>
    </div>
    <div class="main">
      <div class="main_top">
        <div class="lef">
          <div class="" v-for="item in type" :class="['list', currentNavtab == item.id ? 'active' : '']" :key="item.id"
            :value="item.id" @click="handleTab(item.id)">
            {{ item.value }} <span v-if="item.id != 0">({{ item.num }})</span>
          </div>
        </div>
      </div>
      <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
        @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
        <template v-slot:operate="{ scope }">
          <el-button @click="agree(scope.row.id)" size="small" v-if="scope.row.status == 1">同意退款</el-button>
        </template>
      </ex-table>
    </div>
  </div>
</template>
<script>
  import {
    mapState
  } from "vuex";
  // components
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  // api
  import {
    beeAssetcardReturnList,
    beeAssetcardReturnNumber,
    returnAgree,
  } from "@/api/merchants";
  import {
    userAreaSelect
  } from "@/api/common";
  // mixins
  import handlePageMixin from "@/mixins/handlePageMixin";

  export default {
    name: "NewIncreaseVerify",
    components: {
      ExportExcelButton,
    },
    mixins: [handlePageMixin],
    computed: {},
    data() {
      return {
        value: [],
        date: [],
        loading: false,
        type: [{
            id: 0,
            value: "全部",
            num: ""
          },
          {
            id: 1,
            value: "待审核",
            num: 0
          },
          {
            id: 2,
            value: "退款中",
            num: 0
          },
          {
            id: 3,
            value: "已退款",
            num: 0
          },
        ],
        tableColumn: [
          {
            prop: "areaName",
            label: "管辖区域",
            width: "130"
          },
          {
            prop: "cardName",
            label: "卡名称"
          },
          {
            prop: "shopName",
            label: "店铺名称",
            width: "200"
          },
          {
            prop: "money",
            label: "退款金额",
            width: "150"
          },
          {
            prop: "customerNickName",
            label: "会员昵称",
            width: "200"
          },
          {
            prop: "customerPhone",
            label: "会员手机号",
            width: "150"
          },
          {
            prop: "statusDict",
            label: "状态",
            width: "150"
          },
          {
            prop: "createTime",
            label: "退卡时间",
            width: "180"
          },
          {
            label: "操作",
            slot: true,
            slotName: "operate",
            width: "180",
            fixed: "right",
          },
        ],
        filter: {
          areaId: '', //区域id
          shopName: "", //店铺名称
          customer: "", //会员  （用户昵称 或 用户手机号）
          status: "", //退卡状态（1待退款 2 退款中 3 已退款）
          startDate: "", //退卡开始时间
          endDate: "", //退卡结束时间
        },
        tableData: [],
        currentNavtab: 0,
        detailDialog: false,
        normal: "",
        blacklist: "",
        isShow: true,
        areaSelect: [], //区域下拉
      };
    },

    created() {
      this.getUserAreaSelect();
      this.getList();
      this.getNum();
    },
    methods: {
      getUserAreaSelect() {
        //查询用户区域下拉框
        userAreaSelect().then((res) => {
          var arr = [{
            id: "",
            value: "全部",
          }, ];
          this.areaSelect = arr.concat(res.result);
        });
      },
      //同意退款
      agree(id) {
        this.$confirm("您确认同意退款吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            console.log(id)
            returnAgree(id).then((res) => {
              this.$message({
                message: "操作成功!",
                type: "success",
                duration: 1500,
              });
              setTimeout(() => {
                this.getList();
                this.getNum()
              }, 500)
            });
          })
          .catch();
        //   this.$router.push({
        //     path: "/merchants/merchants-detail",
        //     query: { id: id },
        //   });
      },
      //切换选项
      handleTab(id) {
        console.log("id", id), (this.currentNavtab = id);
        if (id != 0 || id != "") {
          this.filter.status = id;
        } else {
          this.filter.status = "";
        }
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
        this.getNum()
      },
      //列表
      getList() {
        this.loading = true;
        const params = {
          ...this.pageOptions,
          ...this.filter,
        };

        beeAssetcardReturnList(params)
          .then((res) => {
            const {
              total,
              records
            } = res.result;
            // records.forEach((item) => {
            //   if(item.status==1){
            //       item.status = '待审核'
            //   }else if(item.status==2){
            //       item.status = '退款中'
            //   }else if(item.status==3){
            //       item.status = '已退款'
            //   }else{
            //       item.status = '-'
            //   }
            // });
            this.$refs.table.pageOptions.total = total;
            this.tableData = records;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      //查询审核条数
      getNum() {
        this.loading = true;
        let data = {
          areaId: this.filter.areaId,
        }
        beeAssetcardReturnNumber(data)
          .then((res) => {
            // const { total,waitingAudit, normal, blacklist,refused } = res.result;
            this.type[1].num = res.result.toRefund;
            this.type[2].num = res.result.refunding;
            this.type[3].num = res.result.refunded;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      //重置
      setReset() {
        this.currentNavtab = 0;
        this.filter.shopName = "";
        this.filter.customer = "";
        this.filter.status = "";
        this.filter.startDate = "";
        this.filter.endDate = "";
        this.filter.areaId = "";
        this.date = [];
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
        this.getNum()
      },
      //搜索
      search() {
        console.log(this.date);
        this.filter.startDate = this.date[0];
        this.filter.endDate = this.date[1];
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
        this.getNum()
      },
    },
  };

</script>
<style lang="scss" scoped>
  @import "./style/merchantsList";

  .el-input {
    width: 190px;
  }

  .first_box {
    ::v-deep :nth-child(1).el-input__inner {
      width: 100px;
    }

    ::v-deep :nth-child(2).el-input__inner {
      width: 200px;
    }
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

</style>
